import React, { useState } from 'react'
import { RightOutline } from 'antd-mobile-icons'
import home from '../yjr_image/房间.png'
import scan_codes from '../yjr_image/扫码.png'
import '../style/hotel.css'


export default React.memo( function HotelService() {
    return (
        <div className='hotel'>
            <div className='left'>
                <h1 className='h11'>
                    <span>酒店服务</span>
                    <span style={{ color: '#818181', height: '3rem', lineHeight: '3rem' }}>
                        <span style={{ fontSize: '1.4rem' }}>更多</span>
                        <RightOutline style={{ fontSize: '1.4rem' }} />
                    </span>
                </h1>
                <div className='left-content'>
                    <div className='left-content-img' style={{ backgroundImage: `url(${home})`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}>

                        <div className='layer'>
                            <h1 className='homeOut'>
                                <p style={{ color: 'white' }}>一键退房</p>
                                <p style={{ color: 'white', fontSize: '1.5rem' }}>尊享使用服务</p>
                            </h1>
                        </div>
                    </div>
                    <div className='left-content-img' style={{ backgroundImage: `url(${scan_codes})`, backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat' }}>
                        <div className='layer'>
                            <h1 className='homeOut'>
                                <p style={{ color: 'white' }}>电子发票</p>
                                <p style={{ color: 'white', fontSize: '1.5rem' }}>无需前台排队</p>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
})